<template>
  <div id="container"></div>
</template>

<script>
import { onUpdated, onMounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from "@vue/reactivity";
import axios from "axios";
import { ref } from "vue";
import { onBeforeMount } from "vue";
window._AMapSecurityConfig = {
  securityJsCode: "918687d06f66f6b5e765f950980d3cb6",
};
export default {
  props: ["active"],
  setup(props) {
    let scenicData = JSON.parse(sessionStorage.getItem("scienceData")); //获取本地数据景区信息
    let scenicTab = JSON.parse(sessionStorage.getItem("scienceTab")); //获取本地数据景区图标
    console.log(scenicData);
    console.log(scenicTab);
    const position = ref([]);
    let indexs = props.active;
    console.log(indexs);
    const map = shallowRef(null);
    const initMap = (res) => {
      AMapLoader.load({
        key: "b6a466abc63ae37c137ede2cbbdeed74", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Icon", ""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          map.value = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "", //是否为3D地图模式
            zoom: 16, //初始化地图级别
            center: [res.data.tab[0].lng, res.data.tab[0].lat], //初始化地图中心点位置
          });
          creatIcon(res);
        })
        .catch((e) => {
          console.log(e);
        });
    };
    function creatIcon(res) {
      for (let i = 0; i < res.data.tab.length; i++) {
        // 创建一个 icon
        var endIcon = new AMap.Icon({
          size: new AMap.Size(30, 30),
          image: scenicTab.data.data[props.active].img,
          imageSize: new AMap.Size(30, 30),
          imageOffset: new AMap.Pixel(0, 0),
        });
        // 将 icon 传入 marker
        var endMarker = new AMap.Marker({
          position: new AMap.LngLat(res.data.tab[i].lng, res.data.tab[i].lat),
          icon: endIcon,
          offset: new AMap.Pixel(-15, -35),
        });
        let textcon = function () {
          let str = "";
          if (props.active == 0) {
            str = `
                    <div class="info">
                        <p>${res.data.data[i].name}</p>
                        <p>人数：${res.data.data[i].num}</p>
                    </div>
                `;
          } else {
            str = `
                    <div class="info">
                        <p>${res.data.tab[i].name}</p>
                    </div>
                `;
          }
          return str;
        };
        // 设置label标签
        // label默认蓝框白底左上角显示，样式className为：amap-marker-label
        endMarker.setLabel({
          direction: "top",
          offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
          content: textcon(), //设置文本标注内容
        });
        map.value.add(endMarker);
      }
    }
    console.log(initMap);
    axios({
      //请求景点标识
      url: "/api/science/map", // url
      params: {
        // 参数
        scienceid: scenicData.id,
        tabid: scenicTab.data.data[props.active].id,
      },
    })
      .then(function (res) {
        console.log(res); // 成功回调
        initMap(res);
      })
      .catch(function (err) {
        console.log(err); // 失败回调
      });
    function reuqest(tid) {
      axios({
        //请求景点标识
        url: "/api/science/map", // url
        params: {
          // 参数
          scienceid: scenicData.id,
          tabid: tid,
        },
      })
        .then(function (res) {
          console.log(res); // 成功回调

          position.value = [res.data.tab[0].lng, res.data.tab[0].lat];
          map.value.setCenter(position.value);
          creatIcon(res);
        })
        .catch(function (err) {
          console.log(err); // 失败回调
        });
    }
    onBeforeMount(() => {});

    onMounted(() => {
      initMap();
    });

    onUpdated(() => {
      console.log(props.active);
      reuqest(scenicTab.data.data[props.active].id);
      map.value.clearMap();
    });

    return {
      map,
    };
  },
};
</script>

<style>
#container {
  padding: 100px;
  margin: 0px;
  width: 100%;
  height: 100vh;
}
.info {
  border-radius: 10px;
  background-color: #ffffff;
  position: relative;
  margin: 0;
  top: 0;
  right: 0;
  min-width: 0;
  padding: 10px;
}

.amap-icon {
  border-radius: 50px;
}
.amap-icon {
  border-radius: 50px;
}

.amap-marker-label {
  border: 0;
  background-color: transparent;
}
.amap-marker-label {
  border: none;
  border-radius: 10px;
}
</style>
